<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="searchForm" :model="searchData" inline>
                    <!--<Form-item>
                        <Select v-model="searchData.type" style="width:100px" placeholder="类型">
                            <Option :value="1">昨天</Option>
                            <Option :value="2">今天</Option>
                        </Select>
                    </Form-item>-->
                     <Form-item prop="wname">
                          <Input type="text" style="width:150px" v-model="searchData.wname" placeholder="用户名">
                          </Input>
                      </Form-item>
                      <Form-item prop="telno">
                          <Input type="text" style="width:150px" v-model="searchData.telno" placeholder="电话">
                          </Input>
                      </Form-item>
                    <Form-item prop="releaseUser">
                          <Date-picker v-model="time" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
                          placeholder="选择日期" style="width: 400px" @on-change="createdateChange"></Date-picker>
                    </Form-item>
                    <Form-item prop="ordertype">
                          <Select v-model="searchData.ordertype" style="width:150px" placeholder="排序类型">
                            <Option :value="item.value" :key="item.value" v-for="item in ordertypelist" >{{item.title}}</Option>
                          </Select>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="search" :loading="loading">
                          <span v-if="!loading">搜索</span>
                          <span v-else>加载中</span>
                        </Button>
                    </Form-item>
                </Form>
                  <br>
                <Button type="primary" @click="givescore">赠送积分</Button>
            </Col>
            <Col span="24" v-if="list">
                <tables ref="tables" :columns="columns" v-model="list"  @on-selection-change="setpasslistchange"
                editable @on-start-edit="onstartedit" @on-cancel-edit="oncanceledit" @on-save-edit="onsaveedit"/>
                <Page :total="pagedata.total" size="small" :current="pagedata.current" :page-size="pagedata.pageSize" :page-size-opts="pagedata.pageSizeOpts"
                    @on-change="pageChange" @on-page-size-change="sizeChange"
                show-elevator show-sizer show-total></Page>
            </Col>
        </Row>
        <Modal v-model="showresult" title="操作结果">
            <div v-for="(item, key) in resultlist" :key="key">
              <Alert type="success" v-if="item.result">
                赠送用户{{item.wname}}[电话{{item.telno}}]积分{{item.givescore}},成功。
              </Alert>
              <Alert type="warning" v-if="!item.result">
                赠送用户{{item.wname}}[电话{{item.telno}}]积分{{item.givescore}},失败：{{item.msg}}。
              </Alert>
            </div>
        </Modal>
    </div>
</template>
<script>
import Tables from '_c/tables'
import { getgivescorelist, givescore } from '@/api/other'
export default {
  name: 'givescorelist',
  components: {
    Tables
  },
  data () {
    // var self = this
    return {
      ordertypelist: [
        { value: 1, title: '总积分正序' },
        { value: 2, title: '使用总积分倒序' }
      ],
      loading: false,
      time: [],
      timeChange: false,
      searchData: {
        type: 1,
        time: [],
        ordertype: 1,
        wname: '',
        telno: ''
      },
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      },
      list: [],
      givelist: [],
      showresult: false, // 显示结果用 未使用
      resultlist: [], // 显示结果用 未使用
      columns: [
        {
          type: 'selection',
          width: 50,
          align: 'center'
        },
        {
          title: 'ID',
          key: 'id',
          width: 80
        },
        {
          title: '会员姓名',
          key: 'wname'
        },
        {
          title: '手机号',
          key: 'telno'
        },
        {
          title: '使用总积分',
          key: 'sum',
          align: 'center',
          sortable: true
        },
        {
          title: '赠送积分数',
          key: 'givescore',
          sortable: true,
          width: 150,
          align: 'center',
          editable: true
        },
        {
          title: '已赠送',
          key: 'givesum',
          sortable: true,
          width: 150,
          align: 'center'
        },
        {
          title: '总积分',
          key: 'sumscore',
          sortable: true,
          width: 150,
          align: 'center'
        }
      ]
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.loading = true
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      if (this.timeChange) {
        this.searchData.time = this.time
      }
      getgivescorelist(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list = []
          this.pagedata.total = 0
          this.pagedata.current = 1
        } else {
          const usedata = data.data
          this.pagedata.total = usedata.count
          this.list = usedata.list
        }
        this.loading = false
      })
    },
    setpasslistchange (selection) {
      this.selectionlist = selection
      if (selection.length >= 0) {
        this.givelist = []
      }
      for (var j = 0, len = selection.length; j < len; j++) {
        this.givelist.push(selection[j])
        // this.givelist.push({ uid: selection[j].id, score: selection[j].givescore })
      }
    },
    changegivelist (changedata) {
      // const  = changedata.id
      for (var j = 0, len = this.givelist.length; j < len; j++) {
        if (this.givelist[j].id === userid) {
          this.givelist[j] = changedata
        }
      }
    },
    pageChange (current) {
      this.pagedata.current = current
      this.getList()
    },
    sizeChange (pageSize) {
      this.pagedata.pageSize = pageSize
      this.pagedata.current = 1
      this.getList()
    },
    onstartedit (row, index, column) {
      // do
    },
    oncanceledit (row, index, column) {
      // do
    },
    onsaveedit (res) {
      var row = res.row
      const key = res.column.key
      const index = res.index
      const value = res.value
      this.list[index][key] = value
      // this.changegivelist(row)
      // console.log(this.list, this.givelist)
    },
    givescore () {
      var that = this
      const length = this.givelist.length
      if (length > 0) {
        var resultlist = []
        var error = false
        for (var i = 0; i < length; i++) {
          const item = this.givelist[i]
          const data = { uid: item.id, score: item.givescore }
          givescore(data).then(res => {
            const data = res.data
            if (data.code !== 200) {
              item.result = false
              item.msg = data.msg
              error = true
            } else {
              item.result = true
            }
            resultlist.push(item)
            if (resultlist.length === length) {
              that.resultlist = resultlist
              that.showresult = true
              that.getList()
              that.givelist = []
            }
          })
        }
      }
    },
    createdateChange (values) {
      this.timeChange = true
      this.time = values
    }
  },
  mounted () {
    var day1 = new Date()
    day1.setDate(day1.getDate() - 1)
    var s1 = day1.toLocaleString('zh', { hour12: false })
    var s2 = new Date().toLocaleString('zh', { hour12: false })
    // this.searchData.time = [s1, s2]
    // this.time = [s1, s2]
    this.getList()
  }
}
</script>
